// 由于webpack是基于Node进行构建的，所有webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')

var htmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
    entry:path.join(__dirname,'./src/main.js'), // 入口文件
    output:{ // 指定输出选项
        path:path.join(__dirname,'./dist'), // 输出路径
        filename:'bundle.js' // 指定输出文件的名称
    },
    plugins:[
        new htmlWebpackPlugin({ // 所有webpack 插件的配置节点
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html' // 设置生成的内存页面的名称
        })
    ],
    module:{ // 配置所有第三方loader模块的
        rules:[ // 第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']}, // 处理css文件的loader 
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, // 处理less文件的loader 
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, // 处理scss文件的loader
            // base64的好处就是减少图片的二次请求，小图片才转base64，大图片不转
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=113732&name=[name].[ext]'}, // 处理图片文件的loader
            // limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的limit值，则不会
            // 被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64的字符串
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}, // 处理字体文件的loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}, // 配置Babel来转换高级的Es语法
            {test:/\.vue$/,use:'vue-loader'} //处理 .vue 文件的loader
        ]
    },
    resolve:{
        alias:{//修改Vue被导入时候包的路径
            // 'vue$':'vue/dist/vue.js'

        }
    }
}